{% extends "base.html" %}

{% block title %}视频下载 - BBDown Web UI{% endblock %}

{% block content %}
<div class="container">
    <h1 class="mb-4">视频下载</h1>
    
    <!-- 视频解析 -->
    <div class="section">
        <h2>视频解析</h2>
        <form id="parse-form">
            <div class="form-group">
                <label for="url">视频链接：</label>
                <input type="text" class="form-control" id="url" name="url" placeholder="输入B站视频链接" required>
            </div>
            <button type="submit" class="btn btn-primary">解析视频</button>
        </form>
    </div>

    <!-- 视频信息 -->
    <div id="video-info" class="section" style="display: none;">
        <h2>视频信息</h2>
        <div class="video-detail">
            <img id="video-cover" src="" alt="视频封面">
            <div>
                <h3 id="video-title"></h3>
                <p id="video-author"></p>
            </div>
        </div>
        <form id="download-form">
            <div class="form-group">
                <label for="cid">分P选择：</label>
                <select class="form-control" id="cid" name="cid" required>
                    <option value="">请选择分P</option>
                </select>
            </div>
            <div class="form-group">
                <label for="quality">清晰度：</label>
                <select class="form-control" id="quality" name="quality" required>
                    <option value="">请选择清晰度</option>
                </select>
            </div>
            <div class="form-group">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="danmaku" name="danmaku">
                    <label class="form-check-label" for="danmaku">下载弹幕</label>
                </div>
            </div>
            <div class="form-group">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="subtitle" name="subtitle">
                    <label class="form-check-label" for="subtitle">下载字幕</label>
                </div>
            </div>
            <div class="form-group">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="download-all" name="download-all">
                    <label class="form-check-label" for="download-all">下载全部分P</label>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">开始下载</button>
        </form>
    </div>

    <!-- 下载进度 -->
    <div id="download-progress" class="section" style="display: none;">
        <h2>下载进度</h2>
        <div class="mb-2">
            <span id="current-step" class="text-muted">准备下载...</span>
            <div id="loading-spinner" class="spinner-border spinner-border-sm text-primary ms-2" role="status" style="display: none;">
            </div>
        </div>
        <div class="progress-label mb-2">视频下载进度</div>
        <div class="progress mb-4">
            <div id="progress-bar-video" class="progress-bar progress-bar-striped progress-bar-animated" 
                 role="progressbar" style="width: 0%">0%</div>
        </div>
        <div class="progress-label mb-2">音频下载进度</div>
        <div class="progress mb-4">
            <div id="progress-bar-audio" class="progress-bar progress-bar-striped progress-bar-animated bg-success" 
                 role="progressbar" style="width: 0%">0%</div>
        </div>
        <div class="d-flex justify-content-between">
            <small id="download-speed" class="text-muted">下载速度: 0 MB/s</small>
            <small id="download-status" class="text-muted">状态: 等待中</small>
        </div>
    </div>

    <!-- 下载链接 -->
    <div id="download-link" class="section" style="display: none;">
        <h2>下载链接</h2>
        <div class="download-link-container">
            <a href="#" target="_blank" class="download-button">下载视频文件</a>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script type="module" src="/static/js/download.js"></script>
{% endblock %} 